| 【CSS】要素を横並び・縦並びにする。display:flexの使い方を実例で解説 | 您所在的位置：网站首页 › jsp style display › 【CSS】要素を横並び・縦並びにする。display:flexの使い方を実例で解説 |
【CSS】要素を横並び・縦並びにする。display:flexの使い方を実例で解説
|
要素を横並びにする方法はいくつか存在する。 一番おすすめはdisplay: flex;（flexbox）。 昔はfloat（とclearfixの組み合わせ）が使われていたが、flexboxが出てからは、そちらの方が主流。 横並びでもカルーセルを作成する場合は、display: table;も使われたりするらしい。 目次 横並び display: flex; display: flex;の注意点 高さは一番大きな要素に合う（画像も！） 高さを元に戻す方法 align-itemsの設定（親） align-selfの設定（子） 各要素の横幅は各要素の中身の大きさになる（指定がない場合） 親要素に収まるように横幅が自動調整される 要素は左寄せになる 水平方向の位置とスペース調整 justify-content 折り返す flex-wrap: wrap; 個別に並べ替えする order: 数値 縦並びに戻す flex-direction: column; 参考リンク一覧 横並び display: flex;通常要素は縦に積まれていく。この親要素に対してdisplay: flex;を指定すると横並びになる。
↓ display: flex;
flexの中の要素の高さに指定がない場合、一番高い要素の高さ自動で変更される。 実例要素２が最も高さがある。 
↓ display: flex; 
高さが最も高い要素２に併せて伸びた。divタグだけでなく画像も縦にいっぱいに伸びてしまう。 これはflexboxの中の要素のcssを指定するalign-itemsというプロパティがデフォルトでstretch（引き伸ばす）になっているため。（normalでも同様になる） 高さを元に戻す方法高さを元の要素の高さに戻す方法は２つある。 align-itemsの設定（親） align-selfの設定（子）＞moz align-items ＞moz align-self 1. align-itemsの設定（親）flexを設定した親要素がデフォルトで`align-items: stretch;となっているのでこれを変更すればいい。 center, flex-start, flex-endの３つだけ覚えておけば大丈夫そう。 値 内容 stretch デフォルト。一番高い要素に合わせて伸びる normal stretchと同じ。 center 中央寄せ。 flex-start 上に寄せる flex-end 下に寄せる start flex-startと同じ。 end 効かない。（flex-startと同じ） baseline ベースラインが一直線になるように配置 1-1. centeralign-items: normal;
align-items: stretch;
align-items: center;
align-items: flex-start;
align-items: flex-end;
flex-startと同じ。。
align-items: center;
Chromeでは効かない、、startと同じになった。 align-items: end;
align-items: baseline;
flexboxの中身を一律で設定するのではなく、要素一つ一つを指定する方法。 使える値は、align-itemsとほぼ同じ。center, flex-start, flex-endを覚えておけばOK。 imgタグにのみalign-self: center;を適用した場合
横幅の指定がない要素は、その要素の中ある要素の大きさになる。
↓ display: flex;
横幅を指定すれば、指定した長さになる。 ▼コード html 要素1要素2 ここはpタグ。 要素4 .css .flexbox div{ background: skyblue; margin: 0 10px; } .flexbox p{ background: yellow; margin: 0 10px; } .flexbox{ border:solid lightgray 1px; width: 70%; display:flex; } 親要素に収まるように横幅が自動調整される中の要素にwidthを指定している場合でも、親要素の幅が縮まると合わせて小さくなる。折り返しはされない。
↓ 親要素の幅を縮める（グレーの枠線）
min-widthを設定している場合は、その値が守られる。 親要素の幅を超える場合ははみ出る。
display: flex;を適用した場合、中の要素は水平方向で左寄せになる。
グレーの親の枠線に対して左に寄っているのがわかる。 水平方向の位置とスペース調整 justify-contentjustify-contentプロパティを使うと、要素を水平方向で調整できる。 値 内容 flex-start デフォルト。左寄せ start デフォルトと同じ。 center 中央寄せ flex-end 中央寄せ end 機能しない。(デフォルトと同じ) space-evenly 均等に配置 space-between 均等に配置。ただし、最初のアイテムは先頭寄せ。最後のアイテムは末尾寄せ。 space-around 均等に配置。ただし、各アイテムの両側に半分の大きさの間隔を置く＞moz justify-content 1. flex-startjustify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-evenly;
justify-content: space-between;
justify-content: space-around;
▼point１ デフォルトでは中の要素が縦方向にstretchしてしまうため、align-itemsやalign-selfと合わせて使うのが一般的。
▼point２ space-*を使った状態でmarginを適用することもできるがわかりにくいため、任意でスペースを開けたい場合は、space-*を使わず、個別にmarginを設定していく方が調整しやすい。 折り返す方法 flex-wrap: wrap;親要素にflex-wrap: wrap;を指定すると、親要素の横幅に合わせて折り返すことができる。デフォルトはno-wrapになっている。 1 2 wrap 折り返し wrap-reverse 逆順で折り返し no-wrap 折り返しなし＞moz flex-wrap 実例
↓ flex-wrap: wrap;
flex-wrap: wrap-reverse;
orderプロパティを使うと指定した順番で並べ替えることができる。 自分の現在位置をorder: 0として、移動した個数を-2や2のように指定する。
↓ imgタグに-2を設定
▼注意点 どれか一つの要素が動いた場合、動いた後の現在位置がorder: 0になる。 縦並びに戻す flex-direction: column;display: flex;を適用すればデフォルトで横並びになるが、メディアクエリなどで再度縦並びに戻したい場合は、以下を追記する。 flex-direction: column; ちなみにデフォルトの横並びはflex-direction: row;が省略されている。 実例
↓ flex-direction: column;
display: flex;のみの時と同じく親の横幅に合わせてstretchする。 元のサイズに戻したい場合は、親にaligh-itemsか子にalign-selfを使う。 html 要素1要素2 ここはpタグ。 要素4 .css .flexbox div{ background: skyblue; margin: 0 10px; min-width: 200px; height: 100px; } .flexbox p{ background: yellow; margin: 0 10px; min-width: 150px; height: 100px; } .flexbox{ border:solid lightgray 4px; width: 70%; display:flex; flex-direction: column; align-items: center; } ・aligh-items: center
display:flexを適用したことで上下の要素に余計なマージンが生じることはない。 他のCSSプロパティが効いている可能性が高い。 参考リンク一覧 moz flexbox moz align-items moz align-self moz flex-wrap moz flex-direction moz justify-content |
要素４が上に移動している。
【本文地址】